<template>
  <div>
    <van-search
      v-model="value"
      show-action
      label="地址"
      placeholder="请输入搜索关键词"
    >
      <template #action>
        <div><van-icon name="cart-circle-o" /></div>
      </template>
    </van-search>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(image, index) in imgages" :key="index">
        <van-image :src="'http://liufusong.top:8080' + image.imgSrc" />
      </van-swipe-item>
    </van-swipe>

    <van-grid :column-num="4">
      <van-grid-item icon="wap-home-o" text="整租" />
      <van-grid-item icon="friends-o" text="合租" />
      <van-grid-item icon="award-o" text="地图找房" />
      <van-grid-item icon="home-o" text="去出租" />
    </van-grid>
    <van-row type="flex" justify="space-between" align="center">
      <van-col span="6" offset="1">租房小组</van-col>
      <van-col span="3">更多</van-col>
    </van-row>

    <van-grid
      :border="false"
      direction="horizontal"
      :column-num="2"
      :gutter="8"
    >
      <van-grid-item v-for="item in teamThatList" :key="item.id" border>
        <van-image :src="'http://liufusong.top:8080' + item.imgSrc" />{{
          item.title
        }}
        {{ item.desc }}
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { getArticles, getzufang } from '@/api/home'

export default {
  name: 'article-page',
  async created() {
    const res = await getArticles()
    this.imgages = res.body
    console.log(this.imgages)

    const res1 = await getzufang()
    this.teamThatList = res1.body
    console.log('this.xiaoZUlist')
  },

  data() {
    return {
      value: '',
      imgages: [],
      teamThatList: []
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
</style>
